<template>
  <div class="footer" @click="changeShow(true)">
    <div class="footer_left">
      <div><img :src="playList[index].al.picUrl" alt=""></div>
      <div>
        <div class="songName">{{playList[index].name}}</div>
        <div class="songer"><span v-for="(item,index) in playList[index].ar" :key="index">{{item.name}}&nbsp;</span></div>
      </div>
    </div>
    <div class="footer_right" @click.stop="">
      <div @click="isPlay"><span class="icon-play1" v-if="isShow"></span><span class="icon-pause"  v-if="!isShow"></span></div>
      <div><span class="icon-list-numbered"></span></div>
    </div>
    <audio @ended="ended" @timeupdate="timeupdate"  controls ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[index].id}.mp3`"></audio>
    <div class="prpup">
    <van-popup v-model="show" position="bottom" :style="{height: '100%' ,width: '100%'}">
      <MusicDetail :isPlay="isPlay"></MusicDetail>
    </van-popup>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations, mapActions} from 'vuex'
import MusicDetail from '../common/MusicDetail.vue'
export default {
  data() {
    return {
      my_lyric: []
    }
  },
  components: {
    MusicDetail
  },
  computed: {
    ...mapState(['playList','index','isShow','lyric','duration']),
    show: {
      get(){return this.$store.state.show},
      set(v) {}
    }
  },
  methods: {
    ...mapMutations(['changeIsShow','changeShow','getLyricArr','updateCurrentTime','changeIndex_vuex','getDuration']),
    ...mapActions(['getLyricData']),
    isPlay() {
      if(this.isShow){
        this.$refs.audio.play();
        this.changeIsShow(false);
      }
      else {
        this.$refs.audio.pause();
        this.changeIsShow(true);
      }
    },
    timeupdate() {
      let t=this.$refs.audio.currentTime;
      this.updateCurrentTime(t);
      //console.log(this.$refs.audio.duration);
      //console.log(t);
    },
    be_next() {
        let l=this.playList.length;
        if(this.index<=l-2) this.changeIndex_vuex(parseInt(this.index)+1);
    },
    ended() {
      console.log('播放結束');
      this.be_next();
    }
  },
  created() {
    
  },
  mounted() {
    this.getLyricData();
    this.getDuration(this.$refs.audio.duration);
  },
  updated() {
    this.getLyricData();
    this.getDuration(this.$refs.audio.duration);
  },
  watch: {
    index(newVal,oldVal){
      this.$refs.audio.autoplay="true";
      this.changeIsShow(false);
    },
    
  }
}
</script>

<style scoped>
body {
  overflow: hidden;
}
.footer {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
  height: 1.2rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #585858;
  background-color: #fff;
  padding: .2rem;
}
.footer_left {
  width: 60%;
  display: flex;
}
.footer_left>div:nth-child(1) {
 width: .8rem;
 display: flex;
 align-items: center;
 margin-right: .2rem;
}
.footer_left>div:nth-child(2) {
  width: 65%;
}
.footer_left>div:nth-child(2)>div {
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}
.footer_left>div img {
  width: 100%;
  border-radius: .4rem;
}
.footer_right {
  width: 20%;
  display: flex;
  justify-content: space-around;
  font-size: .4rem;
}
.songer {
  font-size: .25rem;
}
audio {
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
} 
.prpup {
  position: absolute;
}
</style>